<template>
  <div class="pt">
    <el-input
      class="short-form"
      placeholder="请选择所属班组"
      v-model="depart.value"
      icon="caret-bottom"
      :size="size"
      readonly="readonly"
      :value="depart.id"
      @click.native="isShow=!isShow">
    </el-input>
    <el-tree
      v-show="isShow"
      :class="['box-tree tl',{'pos-ab':position}]"
      node-key="id"
      empty-text="暂无数据"
      :data="depart.regions"
      :props="depart.props"
      :load="loadNode"
      :expand-on-click-node="false"
      lazy
      @node-click="handleNodeClick">
    </el-tree>
  </div>

</template>

<script>
  import {  getDepartTree } from '../../api/auth'
export default {
  name: 'comboDepartTree',
  data(){
    return {
      isShow:false,
      depart:{
        id:'',
        value:'',
        regions: [],
        props: {
          label: 'text',
          children: 'id',
        }
      },
    }
  },
  props:{
    size:{
      type: String,
      default: ''
    },
    position:{
      type: Boolean,
      default: true
    }
  },
  mounted() {
  },
  methods: {
    //加载班组数据
    loadNode(node, resolve) {
      if (node.level === 0) {
        getDepartTree().then(res => {
          let teamData = res.obj;
          this.depart.id = teamData[0].id;
          this.depart.value = teamData[0].text;
          this.$emit("changes",teamData[0].id,teamData[0].text);
          return resolve(teamData);
        });
      }else{
        var hasChild;
        if (node.data.isParent) {
          hasChild = true;
        } else{
          hasChild = false;
        }
      }
      var children;
      if (hasChild) {
        getDepartTree({id:node.data.id}).then(res => {
          children = res.obj;
          resolve(children);
        });
      } else {
        children = [];
        resolve(children);
      }
    },
    //班组选择
    handleNodeClick(data,node){
      this.depart.id = data.id;
      this.$emit("changes",data.id,data.text);
      this.depart.value = data.text;
      this.isShow=!this.isShow;
    },
  }
}
</script>

<style lang="scss">
  .pos-ab{position: absolute;}

  .box-tree{width:100%;height:auto;max-height:260px;overflow-y:auto;z-index:99;}
</style>
